<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Inline Text Formatting :: Antora Docs</title>
    <meta name="generator" content="Antora 3.1.7">
    <link rel="stylesheet" href="../../_/css/site.css">
  </head>
  <body class="article">
<header class="header">
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="../..">Antora Docs</a>
      <button class="navbar-burger" aria-controls="topbar-nav" aria-expanded="false" aria-label="Toggle main menu">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
    <div id="topbar-nav" class="navbar-menu">
      <div class="navbar-end">
        <a class="navbar-item" href="#">Home</a>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link" href="#">Products</a>
          <div class="navbar-dropdown">
            <a class="navbar-item" href="#">Product A</a>
            <a class="navbar-item" href="#">Product B</a>
            <a class="navbar-item" href="#">Product C</a>
          </div>
        </div>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link" href="#">Services</a>
          <div class="navbar-dropdown">
            <a class="navbar-item" href="#">Service A</a>
            <a class="navbar-item" href="#">Service B</a>
            <a class="navbar-item" href="#">Service C</a>
          </div>
        </div>
        <div class="navbar-item">
          <span class="control">
            <a class="button is-primary" href="#">Download</a>
          </span>
        </div>
      </div>
    </div>
  </nav>
</header>
<div class="body">
<div class="nav-container" data-component="component-a" data-version="1.5.6">
  <aside class="nav">
    <div class="panels">
<div class="nav-panel-menu is-active" data-panel="menu">
  <nav class="nav-menu">
    <button class="nav-menu-toggle" aria-label="Toggle expand/collapse all" style="display: none"></button>
    <h3 class="title"><a href="inline-text-formatting.html">Component A</a></h3>
<ul class="nav-list">
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item is-current-page" data-depth="1">
    <a class="nav-link" href="inline-text-formatting.html">Inline Text Formatting</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="special-characters.html">Special Characters and Symbols</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="admonition.html">Admonition</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="sidebar.html">Sidebar</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="ui-macros.html">User Interface Macros</a>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Lists</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="lists/ordered-list.html">Ordered Lists</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="lists/unordered-list.html">Unordered Lists</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </nav>
</div>
<div class="nav-panel-explore" data-panel="explore">
  <div class="context">
    <span class="title">Component A</span>
    <span class="version">1.5.6</span>
  </div>
  <ul class="components">
    <li class="component is-current">
      <div class="title"><a href="inline-text-formatting.html">Component A</a></div>
      <ul class="versions">
        <li class="version is-current is-latest">
          <a href="inline-text-formatting.html">1.5.6</a>
        </li>
      </ul>
    </li>
    <li class="component">
      <div class="title"><a href="../../component-b/2.0/index.html">Component B</a></div>
      <ul class="versions">
        <li class="version is-latest">
          <a href="../../component-b/2.0/index.html">2.0</a>
        </li>
        <li class="version">
          <a href="../../component-b/1.0/index.html">1.0</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
    </div>
  </aside>
</div>
<main class="article">
<div class="toolbar" role="navigation">
<button class="nav-toggle"></button>
  <a href="../../component-b/2.0/index.html" class="home-link"></a>
<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ul>
    <li><a href="inline-text-formatting.html">Component A</a></li>
    <li><a href="inline-text-formatting.html">Inline Text Formatting</a></li>
  </ul>
</nav>
<div class="edit-this-page"><a href="https://gitlab.com/antora/demo/demo-component-a/edit/main/modules/ROOT/pages/inline-text-formatting.adoc">Edit this Page</a></div>
</div>
  <div class="content">
<aside class="toc sidebar" data-title="Contents" data-levels="2">
  <div class="toc-menu"></div>
</aside>
<article class="doc">
<h1 class="page">Inline Text Formatting</h1>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>You can add the following inline styles to your content:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Bold</p>
</li>
<li>
<p>Italic</p>
</li>
<li>
<p>Monospace</p>
</li>
<li>
<p>Highlight</p>
</li>
</ul>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_bold_and_italic"><a class="anchor" href="#_bold_and_italic"></a>Bold and italic</h2>
<div class="sectionbody">
<div class="paragraph">
<p>You can bold and italic entire phrases, a word, and characters in a word.</p>
</div>
<div class="listingblock">
<div class="title">Bold and italic inline formatting</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">*bold phrase* &amp; **char**acter**s**

_italic phrase_ &amp; __char__acter__s__

*_bold italic phrase_* &amp; **__char__**acter**__s__**</code></pre>
</div>
</div>
<div class="exampleblock">
<div class="title">Result</div>
<div class="content">
<div class="paragraph">
<p><strong>bold phrase</strong> &amp; <strong>char</strong>acter<strong>s</strong></p>
</div>
<div class="paragraph">
<p><em>italic phrase</em> &amp; <em>char</em>acter<em>s</em></p>
</div>
<div class="paragraph">
<p><strong><em>bold italic phrase</em></strong> &amp; <strong><em>char</em></strong>acter<strong><em>s</em></strong></p>
</div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_monospace"><a class="anchor" href="#_monospace"></a>Monospace</h2>
<div class="sectionbody">
<div class="paragraph">
<p>You can monospace entire phrases, a word, and characters in a word.</p>
</div>
<div class="listingblock">
<div class="title">Monospace inline formatting</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">`monospace phrase` &amp; ``char``acter``s``

`*monospace bold phrase*` &amp; ``**char**``acter``**s**``

`_monospace italic phrase_` &amp; ``__char__``acter``__s__``

`*_monospace bold italic phrase_*` &amp;
``**__char__**``acter``**__s__**``</code></pre>
</div>
</div>
<div class="exampleblock">
<div class="title">Result</div>
<div class="content">
<div class="paragraph">
<p><code>monospace phrase</code> &amp; <code>char</code>acter<code>s</code></p>
</div>
<div class="paragraph">
<p><code><strong>monospace bold phrase</strong></code> &amp; <code><strong>char</strong></code>acter<code><strong>s</strong></code></p>
</div>
<div class="paragraph">
<p><code><em>monospace italic phrase</em></code> &amp; <code><em>char</em></code>acter<code><em>s</em></code></p>
</div>
<div class="paragraph">
<p><code><strong><em>monospace bold italic phrase</em></strong></code> &amp;
<code><strong><em>char</em></strong></code>acter<code><strong><em>s</em></strong></code></p>
</div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_highlight"><a class="anchor" href="#_highlight"></a>Highlight</h2>
<div class="sectionbody">
<div class="paragraph">
<p>You can highlight entire phrases, a word, and characters in a word.</p>
</div>
<div class="listingblock">
<div class="title">Highlight inline formatting</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">Let's #highlight this phrase# and part of th##is##.</code></pre>
</div>
</div>
<div class="exampleblock">
<div class="title">Result</div>
<div class="content">
<div class="paragraph">
<p>Let&#8217;s <mark>highlight this phrase</mark> and part of th<mark>is</mark>.</p>
</div>
</div>
</div>
</div>
</div>
</article>
  </div>
</main>
</div>
<footer class="footer">
  <p>This page was built using the Antora default UI.</p>
  <p>The source code for this UI is licensed under the terms of the MPL-2.0 license.</p>
</footer>
<script id="site-script" src="../../_/js/site.js" data-ui-root-path="../../_"></script>
<script async src="../../_/js/vendor/highlight.js"></script>
  </body>
</html>
